import React, { useState, useEffect } from 'react'
import { Layout, Progress, Button, Space, Drawer } from 'antd'
import {
  LeftOutlined,
  RightOutlined,
  MenuOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  HomeOutlined
} from '@ant-design/icons'
import SlideContent from './components/SlideContent'
import SlideNavigation from './components/SlideNavigation'
import { slides } from './data/slides'

const { Header, Content, Footer } = Layout

const App: React.FC = () => {
  const [currentSlide, setCurrentSlide] = useState(0)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [drawerVisible, setDrawerVisible] = useState(false)

  // 键盘导航
  useEffect(() => {
    const handleKeyPress = (e: KeyboardEvent) => {
      if (e.key === 'ArrowRight' || e.key === ' ') {
        nextSlide()
      } else if (e.key === 'ArrowLeft') {
        prevSlide()
      } else if (e.key === 'Escape') {
        setIsFullscreen(false)
      } else if (e.key === 'f' || e.key === 'F') {
        toggleFullscreen()
      }
    }

    window.addEventListener('keydown', handleKeyPress)
    return () => window.removeEventListener('keydown', handleKeyPress)
  }, [currentSlide])

  const nextSlide = () => {
    if (currentSlide < slides.length - 1) {
      setCurrentSlide(currentSlide + 1)
    }
  }

  const prevSlide = () => {
    if (currentSlide > 0) {
      setCurrentSlide(currentSlide - 1)
    }
  }

  const goToSlide = (index: number) => {
    setCurrentSlide(index)
    setDrawerVisible(false)
  }

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen()
      setIsFullscreen(true)
    } else {
      document.exitFullscreen()
      setIsFullscreen(false)
    }
  }

  const progress = ((currentSlide + 1) / slides.length) * 100

  return (
    <Layout className="min-h-screen">
      <Header className="bg-white/10 backdrop-blur-md border-b border-white/20 px-4 md:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center space-x-4">
            <Button
              icon={<MenuOutlined />}
              onClick={() => setDrawerVisible(true)}
              className="md:hidden"
            />
            <h1 className="text-xl md:text-2xl font-bold text-white gradient-text">
              Claude 前端开发实战指南
            </h1>
          </div>
          <Space>
            <Button
              icon={<HomeOutlined />}
              onClick={() => goToSlide(0)}
              ghost
              className="text-white border-white/30 hover:border-white/60"
            >
              首页
            </Button>
            <Button
              icon={isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
              onClick={toggleFullscreen}
              ghost
              className="text-white border-white/30 hover:border-white/60"
            >
              {isFullscreen ? '退出' : '全屏'}
            </Button>
          </Space>
        </div>
      </Header>

      <Content className="flex-1 relative">
        <div className="container mx-auto px-6 py-8 h-full">
          <div className="flex gap-6 h-full">
            {/* 侧边导航 - 桌面端 */}
            <div className="hidden lg:block w-64 flex-shrink-0">
              <SlideNavigation
                slides={slides}
                currentSlide={currentSlide}
                onSelectSlide={goToSlide}
              />
            </div>

            {/* 主内容区 */}
            <div className="flex-1 bg-white/95 backdrop-blur rounded-2xl shadow-2xl p-8 lg:p-10 overflow-auto">
              <SlideContent slide={slides[currentSlide]} />
            </div>
          </div>
        </div>

        {/* 进度条 */}
        <Progress
          percent={progress}
          showInfo={false}
          strokeColor={{
            '0%': '#8B5CF6',
            '50%': '#EC4899',
            '100%': '#06B6D4',
          }}
          className="absolute bottom-0 left-0 right-0"
          style={{ lineHeight: '4px' }}
        />
      </Content>

      {/* 移动端抽屉导航 */}
      <Drawer
        title="目录导航"
        placement="left"
        onClose={() => setDrawerVisible(false)}
        open={drawerVisible}
        width={280}
      >
        <SlideNavigation
          slides={slides}
          currentSlide={currentSlide}
          onSelectSlide={goToSlide}
        />
      </Drawer>

      <Footer className="text-center text-white/60 py-4 bg-white/5 backdrop-blur">
        <p>使用 ← → 方向键或空格键导航 | F键全屏 | ESC退出全屏</p>
      </Footer>
    </Layout>
  )
}

export default App